<template>
  <el-dialog
    v-if="modelValue.visible"
    v-model="modelValue.visible"
    title="查看已使用该物料使用规则的物料列表"
    width="800px"
  >
    <div class="warning-rules-container">
      <!-- 搜索区域 -->
      <div class="search-area">
        <div class="search-left">
          <el-input
            style="width: 240px"
            v-model="searchKeyword"
            placeholder="请输入物料编码/名称"
            clearable
            class="search-input"
          >
            <!-- <template #append>
            </template> -->
          </el-input>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </div>
        <div>
          <el-select
            style="width: 240px"
            v-model="selectedMaterial"
            filterable
            clearable
            placeholder="请选择物料"
            class="material-select"
          >
            <el-option
              v-for="item in materialOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button
            style="width: 100px; margin-left: 12px"
            type="primary"
            class="add-button"
          >
            添加适用物料
          </el-button>
        </div>
      </div>

      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        class="material-table"
      >
        <el-table-column prop="materialCode" label="物料编码" min-width="120" />
        <el-table-column prop="materialName" label="物料名称" min-width="150" />
        <el-table-column prop="operator" label="操作人" min-width="120" />
        <el-table-column label="操作" width="100px" fixed="right">
          <template #default="scope">
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.row)"
              class="delete-button"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <div class="pagination-area">
        <div class="pagination-info">共 {{ total }} 条</div>

        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="sizes, prev, pager, next, jumper"
          background
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { Close, Search } from '@element-plus/icons-vue'
const props = defineProps(['modelValue'])

// 搜索相关数据
const searchKeyword = ref('')
const selectedMaterial = ref('')

// 表格数据
const tableData = ref([
  {
    materialCode: 'M0012',
    materialName: '林里招牌红茶',
    normalShelfLife: 4,
    refrigeratedShelfLife: 4,
    cleaningCycle: 24,
    operator: 'll_yanjiang',
  },
])

// 分页数据
const total = ref(1)
const currentPage = ref(1)
const pageSize = ref(20)
const gotoPage = ref(1)

// 物料选项
const materialOptions = ref([
  { value: 'M0012', label: '林里招牌红茶' },
  // 可以添加更多物料选项
])

// 方法
function handleSearch() {
  // 根据搜索关键词获取数据
  console.log('搜索:', searchKeyword.value)
}

function handleAddMaterial() {
  // 添加预警物料的逻辑
  console.log('添加预警物料')
}

function handleClose() {
  // 关闭窗口的逻辑
  console.log('关闭窗口')
}

function handleDelete(row) {
  // 删除物料的逻辑
  console.log('删除物料:', row.materialCode)
  // 实际应用中，这里应该调用API删除数据后更新tableData
}

function handleSizeChange(val) {
  pageSize.value = val
  // 重新加载数据
  console.log('每页条数:', val)
}

function handleCurrentChange(val) {
  currentPage.value = val
  // 重新加载数据
  console.log('当前页:', val)
}

function handleGotoPage(val) {
  if (val >= 1 && val <= Math.ceil(total.value / pageSize.value)) {
    currentPage.value = val
    // 重新加载数据
    console.log('跳转到第', val, '页')
  }
}
</script>

<style scoped>
.warning-rules-container {
  width: 100%;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-sizing: border-box;
}

.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title-bar h2 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.close-icon {
  font-size: 20px;
  cursor: pointer;
  color: #999;
}

.close-icon:hover {
  color: #333;
}

.search-area {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
  justify-content: space-between;
}

.search-left,
.search-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-input,
.material-select,
.add-button {
  width: 220px;
}

.add-button {
  width: 140px;
}

.material-table {
  margin-bottom: 20px;
}

.pagination-area {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.pagination-info {
  font-size: 14px;
  color: #666;
}

.pagination {
  margin: 0 !important;
}

.goto-page {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.goto-input {
  width: 60px;
  margin: 0 5px;
}
</style>
